<template>
  <svg :class="cls" :style="styleObj" aria-hidden="true">
    <use :href="symbolId" :fill="computedFill" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  /** 图标文件名（不带 .svg） */
  name: string;
  /** 尺寸：数字=px，字符串=任意合法 css 值 */
  size?: number | string;
  /** 颜色：任意 CSS 颜色值；不传则使用 SVG 原色 */
  color?: string;
  /** 旋转角度 */
  rotate?: number;
  /** 是否旋转动画 */
  spin?: boolean;
  /** 额外 class */
  class?: string;
}

const props = withDefaults(defineProps<Props>(), {
  size: 16,
  rotate: 0,
  spin: false,
});

/* 生成 #icon-add-fill */
const symbolId = computed(() => `#icon-${props.name}`);

/* 如果外部给了 color，就覆盖；否则保持 SVG 原色（即不填 fill） */
const computedFill = computed(() => (props.color ? "currentColor" : undefined));

/* 拼接 class */
const cls = computed(
  () =>
    [
      "svg-icon", // 方便全局覆写样式
      props.spin && "animate-spin",
      props.class,
    ].filter(Boolean) as string[]
);

/* 动态样式 */
const styleObj = computed(() => {
  const w = typeof props.size === "number" ? `${props.size}px` : props.size;
  return {
    width: w,
    height: w,
    color: props.color, // 单色场景下生效
    transform: `rotate(${props.rotate}deg)`,
  };
});
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: middle;
}
/* 旋转动画（如用 UnoCSS 可删掉） */
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
